<template>
    <div class="cart">
        <p v-show="!products.length">
            <i>购物车空空如也...</i>
        </p>
        <ul>
            <li v-for="product in products" :key="product.id">
                {{product.title}} ------ {{product.price | currency }} x  {{product.quantity}}
            </li>
        </ul>
        <p>总计: {{total | currency }}</p>
        <p>
            <el-button type="primary" :disabled="!products.length" @click="checkout(products)"> 结 算 </el-button>
        </p>
        <p v-show="checkoutStatus">
            <el-tag :type="checkoutStatus === 'successful' ? 'success' : 'danger'">
                Checkout {{ checkoutStatus }}.
            </el-tag>
        </p>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Getter, Action } from 'vuex-class'
import { CartProduct, CheckoutStatus } from "@/store";
@Component
export default class Cart extends Vue {
    @Getter('cartProducts')
    public products!: CartProduct[];

    @Getter('checkoutStatus')
    public checkoutStatus!: CheckoutStatus;

    @Action('checkout')
    public actionCheckout!: any;

    get total() : number {
        return this.products.reduce((total, p) => {
            return total + p.price * p.quantity
        }, 0)
    }

    public checkout (products: CartProduct[]) {
        this.actionCheckout(products)
    }

}
</script>

<style scoped>

</style>
